<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05比例尺的使用</title>
    <script src="./node_modules/d3/dist/d3.min.js"></script>
</head>
<body>

</body>
</html>
<script>
    /*
    // 线性比例尺
    const linear = d3.scaleLinear()
        .domain([0, 10])
        .range([0, 100])
    console.log(linear(1));
    // 序数比例尺
    const index = [0, 1, 2, 3, 4];
    const color = ["red", "blue", "green", "yellow", "black"];
    const ordinal = d3.scaleOrdinal()
        .domain(index)
        .range(color)
    console.log(ordinal(1));
    */

    /*
    * 含有比例尺的柱状图
    * */
    const dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
    const linear = d3.scaleLinear()
        .domain([10, 0])
        .range([200, 20]);
    const body = d3.select('body');
    body.append('svg')
        .attr('width', 500)
        .attr('height', 500)
        .style('background', 'rgba(0,0,0,.2)');
    const barWidth = 2
    console.log(linear(0.9));
    body.select('svg')
        .selectAll('rect')
        .data(dataset)
        .enter()
        .append('rect')
        .attr('x', (data, i) => {
            return linear(barWidth) * i
        })
        .attr('width', linear(barWidth - 2))
        .attr('y', (data, i) => {
            return 500 - linear(data)
        })
        .attr('height', (data, i) => {
            return linear(data)
        })
        .attr('fill', 'blue')

</script>
